<template>
	<view>
		<view class="" style="margin-top: 30upx;">
			<view class="column">
				<view class="">店铺名称</view>
				<input type="text" v-model="shop_name" placeholder="输入机构名称"/>
			</view>
			<view class="column">
				<view class="">招生科目</view>
				<input type="text" v-model="subjects_name" placeholder="输入科目"/>
			</view>
			<view class="column">
				<view class="">联系人</view>
				<input type="text" v-model="contact" placeholder="输入联系人,如刘老师"/>
			</view>
			<view class="column">
				<view class="">联系电话</view>
				<input type="text" v-model="phone" placeholder="输入联系电话"/>
			</view>
			<view class="column">
				<view class="">所在地区</view>
				<input type="text" v-model="area" placeholder="请选择机构所在地区" disabled @click="chooseCity"/>
				<image :src="imglink + 'recommend/location_Hui.svg'" mode="" style="width: 40upx;height: 40upx;" @click="chooseCity"></image>
			</view>
			<view class="column">
				<view class="">招生需求时间</view>
				<input type="text" v-model="needs_time" placeholder="请选择招生需求时间" disabled @click="date"/>
				<image :src="imglink + 'organization/active_icon_go.png'" style="width: 40upx;height: 40upx; margin-top: 15upx;" @click="date"></image>
			</view>
			<view class="column">
				<view class="">招生目标</view>
				<input type="text" v-model="needs_num" placeholder="请输入招生的目标，比如30人"/>
				<view style="position: absolute; right: -10upx; font-size: 30upx; margin-top: 15upx;">人</view>
			</view>
			<view class="establishment">
				<view class="">机构成立时间</view>
				<view class="">
					<!-- <radio-group style="margin-top: 20upx; margin-left: 20upx;">
						<label style="margin-right: 60upx;" v-for="(item, index) in items" :key="item.value"
						@click="store_set_time = item.value">
							<view style="display: inline-block;">
								<radio style="transform:scale(0.7)" :value="item.value || store_set_time" />
							</view>
							<view style="display: inline-block; width: 100upx;">{{item.name}}</view>
						</label>
					</radio-group> -->
					<view class="" style="margin-top: 10upx; background-color:#f5f5f5; padding-top: 15upx; padding-left: 20upx;">
						<view class="account-selection" v-for="( item,index ) in items" :key="index" @click="store_set_time = item.value">
							<image style="width: 40upx; height: 40upx;" :src="store_set_time == item.value ? opt : noopt" mode=""></image>
							<view style="display: inline-block; vertical-align: top; width: 150upx;">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="remarks">
				<view class="">备注说明:</view>
				<textarea placeholder="请输入其他说明" maxlength="-1" v-model="detail"></textarea>
			</view>
		</view>
		<button class="release-btn" type="default" @click="setEnrollmentDemand">确定修改</button>
		<!-- 地址选择 -->
		<view v-if="tkuang">
			<picker-view class="birthday" :indicator-style="indicatorStyle" :value="index" @change="bindChanges">
				<picker-view-column>
					<view class="item" v-for="item in provinceList" :key="item.province_id">{{item.province}}省</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="item in cityListDetails" :key="item.city_id">{{item.city}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="item in prefectureDetailList" :key="item.country_id">{{item.country}}</view>
				</picker-view-column>
			</picker-view>
			<view @click="sure" class="birthday-tkang" v-if="tkuang"></view>
			<view class="determine" @click="sure">确定</view>
		</view>
		<!-- 时间选择 -->
		<uni-popup ref="wenzi" type="bottom" :maskClick=false>
			<view class="date-select">
				<view class="btn">
					<view class="btn-left" @tap="concel">
						取消
					</view>
					<view class="btn-right" @tap="confirm">
						确定
					</view>
				</view>
				<picker-view class="picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import {formatFullTime} from '@/common/util.js'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			const today = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
			for (let i = date.getFullYear(); i <= 2030; i++) {
				years.push(i)
			}
			
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				imglink: this.$store.state.imgLink,
				noopt:'https://tool.tuanhaoke.cn/static/image/member/manage-active_icon_normal.png',
				opt:'https://tool.tuanhaoke.cn/static/image/member/manage-active_icon_selected.png',
				// 招生需求id
				shopid:'',
				// 店铺名称
				shop_name:'',
				// 招生科目
				subjects_name:'',
				// 联系人
				contact:'',
				// 联系电话
				phone:'',
				// 所在地区
				area:'',
				// 招生需求时间
				needs_time:'',
				// 招生目标
				needs_num:'',
				// 机构成立时间
				store_set_time:'',
				// 备注说明
				detail:'',
				enrollmentDemands: [
					
				],
				items:[
					{
						value:'1年以内',
						name:'1年以内'
					},
					{
						value:'1-2年',
						name:'1-2年'
					},
					{
						value:'3-5年',
						name:'3-5年'
					},
					{
						value:'5年以上',
						name:'5年以上'
					},
				],
				years,
				year,
				months,
				month,
				days,
				day,
				today,
				value: [0, month - 1, day - 1],
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
				visible: true,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				tkuang:false,

				provinceId:'',
				cityiD:'',
				province:'',
				city:'',
				provinceList:[],
				cityList:[],
				index:[0,0,0],
				cityListDetails:[],
				value:[0,0,0],
				prefecture:'',
				prefectureId:'',
				prefectureDetailList:[]
				
			}
		},
		onLoad(options){
			this.customer_id = parseInt(options.customer_id,10)
			console.log('进入了onload 获取url的customer_id',this.customer_id)
			let id = parseInt(options.id,10);
			console.log('进入了onload 获取url的id',id)
			this.shopid = id
			this.getEnrollmentDemand()
		},
		onShow() {
			this.getCity()
		},
		// filters:{
		// 	formatDates(value) {
		// 		let date = new Date(value * 1000);
		// 		let y = date.getFullYear();
		// 		let MM = date.getMonth() + 1;
		// 		MM = MM < 10 ? ('0' + MM) : MM;
		// 		let d = date.getDate();
		// 		d = d < 10 ? ('0' + d) : d;
		// 		return y + '-' + MM + '-' + d;
		// 	}
		// },
		methods: {
			formatDates(value) {
				let date = new Date(value * 1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				this.needs_time = y + '-' + MM + '-' + d;
			},
			// 获取招生需求
			getEnrollmentDemand(){
				console.log("getEnrollmentDemand",this.$store.getters.getToken)
				let data = {
					token:this.$store.getters.getToken,
					customer_id:this.$store.getters.getCustomerId,
					store_id:this.$store.getters.getStoreId,
				}
				console.log("8888888");
				// 3.发送请求
				this.$api.get_enrollmentDemand(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						this.enrollmentDemands = res.data.data
						console.log(this.enrollmentDemands,'招生需求')
						for( let i = 0; i < this.enrollmentDemands.length; i++ ){
							if( this.enrollmentDemands[i].id == this.shopid ){
								// 店铺名称
								this.shop_name = this.enrollmentDemands[i].store_name
								// 招生科目
								this.subjects_name = this.enrollmentDemands[i].subjects_name
								// 联系人
								this.contact = this.enrollmentDemands[i].contact
								// 联系电话
								this.phone = this.enrollmentDemands[i].phone
								// 所在地区
								this.area = this.enrollmentDemands[i].area
								// 招生需求时间
								this.formatDates(this.enrollmentDemands[i].needs_time)
								// 招生目标
								this.needs_num = this.enrollmentDemands[i].needs_num
								// 机构成立时间
								this.store_set_time = this.enrollmentDemands[i].store_set_time
								// 备注说明
								this.detail = this.enrollmentDemands[i].detail
								console.log(1111111111111111111111111111111111111);
							}
						}
						console.log(this.enrollmentDemands,'招生需求')
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			//地区
			bindChanges(e){
				this.value  = e.detail.value
				this.cityListDetails = this.cityList[e.detail.value[0]]
				this.prefectureDetailList = this.cityListDetails[e.detail.value[1]].children
			},
			chooseCity(){
				this.tkuang = true
				// this.$refs.mpvueCityPicker.show()
			},
			sure(){
				this.tkuang = false
				this.province = this.provinceList[this.value[0]].province
				this.city = this.cityListDetails[this.value[1]].city
				this.provinceId = this.provinceList[this.value[0]].province_id
				this.cityiD = this.cityListDetails[this.value[1]].city_id
				this.prefecture = this.prefectureDetailList[this.value[2]].country
				this.prefectureId = this.prefectureDetailList[this.value[2]].country_id
				console.log(this.province,this.city,this.prefectureId)
				console.log(this.provinceId,this.cityiD,this.prefectureId)
				this.area = `${this.province}省/${this.city}/${this.prefecture}`
			},
			getCity(){
				this.$api.gain_all_city({token:this.$store.getters.getToken}).then(res => {
					console.log(res)
					if(res.status){
						this.provinceList = res.list
						this.provinceList.forEach(item => {
							this.cityList.push(item.children)
						})
						this.cityListDetails = this.cityList[0]
						console.log(this.provinceList)
						this.prefectureDetailList = this.cityListDetails[0].children
						
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 打开时间选择
			date() {
				this.$refs.wenzi.open();
			},
			// 关闭时间选择
			concel(){
				this.$refs.wenzi.close();
			},
			confirm(){
				this.yue = this.month < 10 ? ('0' + this.month) : this.month;
				this.ri=this.day < 10 ? ('0' + this.day) : this.day;
				
				this.needs_time  = this.year + '-' + this.yue + '-' + this.ri;
				this.$refs.wenzi.close();
			},
			bindChange(e) {
				let a;
				let y;
				console.log(e,'454');
				let val = e.detail.value;
				y = this.years[val[0]];
				a = this.months[val[1]];
				this.day = this.days[val[2]];
				this.month = a;
				this.year = y;
				this.days = [];
				if (a||y) {
					if (a == 1 || a == 3 || a == 5 || a == 7 || a == 8 || a == 10 || a == 12) {
						for (let i = 1; i <= 31; i++) {
							this.days.push(i)
						}
					} else if (a == 4 || a == 6 || a == 11 || a == 9) {
						for (let i = 1; i <= 30; i++) {
							this.days.push(i)
						}
									
					} else if (a == 2) {
						if (this.year % 4 == 0 && (this.year % 100 != 0 || this.year % 400 == 0)) {
							for (let i = 1; i <= 29; i++) {
								this.days.push(i)
							}
						} else {
							for (let i = 1; i <= 28; i++) {
								this.days.push(i)
							}
						}
					}
							
				}
			},
			// 修改招生需求
			setEnrollmentDemand(){
				if(this.shop_name == ''){
					uni.showToast({
						title:"店铺名称不得为空!",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.subjects_name == ''){
					uni.showToast({
						title:"请输入招生科目!",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.contact == ''){
					uni.showToast({
						title:"请输入联系人",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.phone == ''){
					uni.showToast({
						title:"请输入联系电话",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.area == ''){
					uni.showToast({
						title:"请选择所在地区!",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.needs_time == ''){
					uni.showToast({
						title:"请选择招生需求时间!",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.needs_num == ''){
					uni.showToast({
						title:"请输入招生目标!",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.store_set_time == ''){
					uni.showToast({
						title:"请选择机构成立时间!",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.detail == ''){
					uni.showToast({
						title:"请输入备注!",
						icon:"none",
						duration:2000
					})
					return false
				}
				console.log("setEnrollmentDemand",this.$store.getters.getToken)
				let data = {
					token:this.$store.getters.getToken,
					id:this.shopid,
					customer_id:this.$store.getters.getCustomerId,
					nickName:this.$store.state.nickName,
					store_id:this.$store.getters.getStoreId,
					store_name: this.shop_name,
					subjects_name: this.subjects_name,
					contact:this.contact,
					phone:this.phone,
					area: this.area,
					needs_time: new Date(this.needs_time).getTime() / 1000,
					needs_num: this.needs_num,
					store_set_time: this.store_set_time,
					detail: this.detail,
				}
				console.log(data);
				console.log("8888888");
				// 3.发送请求
				this.$api.modify_enrollmentDemand(data).then(res => {
					console.log(res)
					if(res.status){
							uni.showToast({
								title:'添加成功!',
								icon:'none',
								duration:2000,
							})
							setTimeout(() => {
								// uni.navigateTo({
								// 	url:"myEnrollmentDemand?topNavActiveIndex=0&store_id="+this.$store.getters.getStoreId
								// })
								uni.navigateBack({
									delta:1
								})
							},1000)
							
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	input{
		display: inline-block;
		background-color: #F5F5F5;
		width: 470upx;
	}
	.column{
		margin: 16upx 40upx 16upx 40upx;
		background-color: #ECECEC;
		height: 70upx;
	}
	.column>view{
		display: inline-block;
		width: 160upx;
		margin-left: 10upx;
		text-align: center;
		font-size: 26upx;
		vertical-align: middle;
	}
	.column>input{
		position: absolute;
		display: inline-block;
		border: none;
		background-color: #F5F5F5;
		padding: 16upx 0upx 15upx 20upx;
		right: 40upx;
		font-size: 28upx;
		vertical-align: middle;
	}
	.column>image{
		position: absolute; 
		right: 50upx; 
		width: 30upx;
		height: 30upx;
		margin-top: 20upx;
	}
	.establishment{
		margin: 28upx 40upx 12upx 40upx;
		background-color: #ECECEC;
		height: 130upx;
	}
	.establishment>view:nth-child(1){
		display: inline-block;
		width: 160upx;
		margin-left: 10upx;
		margin-top: 48upx;
		text-align: center;
		font-size: 26upx;
		vertical-align: middle;
	}
	.establishment>view:nth-child(2){
		position: absolute;
		display: inline-block;
		right: 40upx;
		height: 130upx;
		width: 490upx;
		background-color: #F5F5F5;
		font-size: 26upx;
		vertical-align: top;
	}
	.remarks{
		margin-top: 40upx;
	}
	.remarks>view{
		display: inline-block;
		margin-left: 40upx;
		margin-bottom: 20upx;
		font-size: 26upx;
		vertical-align: middle;
	}
	.remarks>textarea{
		width: 648upx;
		background-color: #F5F5F5;
		margin-left: 40upx;
		margin-right: 40upx;
		height: 250upx;
		font-size: 28upx;
		padding: 10upx 0upx 10upx 20upx;
	}
	.release-btn{
		width: 480upx;
		margin-top: 40upx;
		line-height: 80upx;
		font-size: 28upx;
		border-radius: 15upx;
		color: #ffffff;
		background-color: #FF8B46;
		border-radius: 60upx;
	}
	.date-select {
		width: 100%;
		height: 700upx;
		border-top-left-radius: 40upx;
		border-top-right-radius: 40upx;
		background-color: #FFFFFF;
		position: relative;
	}
	.picker-view {
		background-color: #EEEEEE;
		position: absolute;
		width: 100%;
		height: 500upx;
		bottom: 20upx;
	}
	.item {
		line-height: 100rpx;
		font-size: 34upx;
		text-align: center;
	}
			
	.btn{
		width: 100%;
		height: 100upx;
		/* // margin-top: 20upx;? */
		box-sizing: border-box;
		padding: 40upx 30upx;
	}
	.btn-left,.btn-right{
		color: #FFFFFF;
		width: 150upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-radius: 15upx;
	}
	.btn-left{
		background-color: #BEBEBE;
	}
	.btn-right{
		position: absolute;
		margin-top: -90upx;
		right: 30upx;
		background-color: #1cb419;
	}
	.birthday{
		position: fixed;
		left: 40upx;
		right: 40upx;
		margin: 0;
		transform: translate(0,-50%);
		top: 50%;
		bottom: 0;
		z-index: 888;
		height: 400upx;
		background: #fff;
		text-align: center;
	}
	.determine{
		position: fixed;
		top: 37%;right: 40upx;
		transform: translate(0,-50%);
		font-size: 35upx;
		color: #FFFFFF;
		padding: 20upx;
		z-index: 999;
		background: #FF8B46;
	}
	.birthday-tkang{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 300;
		opacity: 0.5;
		background: #000000;
	}
	.account-selection{
		display: inline-block; 
		font-size: 28upx; 
	}
</style>
